<template>
  <van-sticky>
  <van-nav-bar
    title="购物车"
    left-text="返回"
    left-arrow
    @click-left="$router.back()"
  />
  </van-sticky>
  <!-- {{cart}} -->
  <div v-if="cart" class="cartbox">
    <Goods
      @state-change="getNewState"
      v-for="item in cart"
      :list="item"
      :id="item.goods_id"
      :key="item.goods_id"
    ></Goods>
  </div>
   <div v-show="cart.length==0">
     <van-empty
    image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
    image-size="80"
    description="购物车为空"
  />
   </div>
  <Footer
    :isfull="fullState"
    @full-change="full_change"
    :totalprice="checkedGoodsAmount"
    :all="checkedCount"
  ></Footer>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
import Goods from '@/components/cart/goods.vue'
import Footer from '@/components/cart/cartfooter.vue'
export default {
  components: {
    Goods,
    Footer,
  },
  computed: {
    ...mapState('m_cart', ['cart']),
    ...mapGetters('m_cart', ['checkedCount', 'checkedGoodsAmount']),
    fullState(){
      return this.cart.every(item=>item.goods_state)
    }
  },
  methods: {
    ...mapMutations('m_cart', ['updateGoodsState',"updateAllGoodsState"]),
    getNewState(goods) {
      // console.log(goods)
      this.updateGoodsState(goods)
      // console.log(e)
    },
    full_change(state){
      this.updateAllGoodsState(state)
    }
  },
  mounted() {
    console.log(this.cart)
  },
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background: #4e8ccd;
}
.van-nav-bar /deep/ .van-ellipsis {
  color: #fff !important;
}
.van-nav-bar /deep/ .van-nav-bar__text {
  color: #fff;
}
.van-nav-bar /deep/ .van-icon {
  color: #fff;
}
.cartbox{
  margin-bottom: 1.2rem;
}
</style>
